import React, { Component} from 'react'
import { Container, Content } from 'native-base'
import { View, Text, StyleSheet, TouchableOpacity, ScrollView } from 'react-native'
import commonStyle from '../../libs/commonStyle'
import HeaderWhite from '../../components/header/headerWhite'
import pxToDp, { deviceHeightDp, deviceWidthDp } from '../../libs/pxToDp'
import TabsCom from '../../components/tabs/index.js'

import {newers, mijis} from './data'

export default class Guide extends Component {
	constructor(arg) {
	    super(arg)
		this.state = {
			activeIndex: 0,
			lists: [
				{
					name: '新手指南'
				},
				{
					name: '赚钱秘籍'
				},
				{
					name: '视频教程'
				}
			]
		}
	}
	onTabChange(index) {
		this.setState({
			activeIndex: index
		})
	}
	renderContent () {
		let {activeIndex} = this.state
		let data = []
		if (activeIndex === 0 || activeIndex === 1) {
			activeIndex === 0 ? (data = newers) : (data = mijis)
			return (<View style={[commonStyle.p30]}>
						{
							data.map((item, index) => {
								return (
									<View style={[commonStyle.borderBottom, commonStyle.pb30, commonStyle.mb30]}>
										<Text style={[
											commonStyle.f32, 
											commonStyle.colorBlack1,
											commonStyle.mb10
											]}>Q{index+1}: {item.title}</Text>
										{
											item.desc.map(i => {
												return (<Text style={[commonStyle.colorGray1, commonStyle.lineHeight50]}>{i}</Text>)
											})
										}
									</View>
								)
							})
						}
					</View>)
		}
	}
	render () {
		let {lists, activeIndex} = this.state
		return (
			<Container>
				<HeaderWhite title='新手学堂' hasLeft />
				<TabsCom lists={lists} onTabChange={this.onTabChange.bind(this)}  activeIndex={activeIndex} />
				<ScrollView horizontal={false} style={[{height: deviceHeightDp - 100}]}>
					{this.renderContent()}
				</ScrollView>
			</Container>
		)
	}
}

const styles = StyleSheet.create({
	
})